-
-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Enhance User Interaction with Customizable hitSlop on DrawerToggleButton #11781
base: main
Are you sure you want to change the base?
Conversation
Hey @03balogun! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## main #11781 +/- ##
=======================================
Coverage 76.68% 76.68%
=======================================
Files 208 208
Lines 6128 6130 +2
Branches 2402 2404 +2
=======================================
+ Hits 4699 4701 +2
Misses 1376 1376
Partials 53 53 ☔ View full report in Codecov by Sentry. |
✅ Deploy Preview for react-navigation-example ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR. Any reason to make this a prop instead of updating the hitSlop to an appropriate value? Even a prop is added, I think it makes sense to update the value if the current one isn't good enough.
Can you also share a screenshot of how the hitSlop
area looks compared to the button and header size?
Motivation
The motivation behind this change is to enhance the user experience by making the drawer toggle button more accessible, especially on devices with smaller screens or for users with accessibility needs. By allowing customizable
hitSlop
values, developers have greater control over the touchable area, ensuring a more user-friendly navigation experience.The
hitSlop
was hardcoded with platform-specific values, leading to a limited and non-customizable touchable area. Specifically, the hitSlop for iOS was undefined, which could result in a challenging interaction experience for users on iOS devices due to the small target area.The
hitSlop
property is now exposed as a prop, allowing for customizable configuration. Users can specify their preferred hitSlop values, or it defaults to { top: 16, right: 16, bottom: 16, left: 16 } for non-iOS platforms.Impact
This change is backward compatible and does not introduce breaking changes. It adds an additional layer of customization for developers, catering to a wider range of user interactions and accessibility requirements.
I believe this enhancement aligns well with the goals of react-navigation to provide a robust and user-friendly navigation experience. I look forward to your feedback and suggestions on this PR.
Test plan
Example code